<template>
  <el-switch
    v-model="flag"
    @change="toggleDark"
    :active-icon="IconMoon"
    :inactive-icon="IconSun"
    inline-prompt
  />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useDark, useToggle } from '@vueuse/core'
import IconSun from '@/components/icons/IconSun.vue'
import IconMoon from '@/components/icons/IconMoon.vue'

// 暗夜模式标志位
const flag = ref<Boolean>(false)
// 是否开启了暗夜模式
const isDark = useDark()
// 切换模式
const toggleDark = useToggle(isDark)

onMounted(() => {
  flag.value = isDark.value
})
</script>

<style scoped></style>
